<script setup>
import {
  ref,
  onMounted,
  onUnmounted,
  reactive,
  computed,
  watch,
  nextTick,
} from 'vue'
import { useRoute } from 'vue-router'
import { wallType, label } from '@/utils/data.js'
import { getWalls, getIpInfo } from '@/api/walls'
import lottie from 'lottie-web'
import loading from '@/assets/images/loading.json'
import NodeCard from '@/components/NodeCard.vue'
import Modal from '@/components/Model.vue'
import NewCard from '@/components/NewCard.vue'
import CardDetail from '@/components/CardDetail.vue'
import PhoteCard from '@/components/PhoteCard.vue'
import View from '@/components/View.vue'

const route = useRoute()

// 标签下标
const slabel = ref(-1)
// 添加按钮的y轴
const addBottom = ref(30)
// 弹出层标题
const title = ref('留言墙')
// 弹出层是否显示
const isShow = ref(false)
// 加载框是否显示
const isLoading = ref(false)
// 留言数据
const walls = ref([])
// 照片数据
const phone = ref([])
// 当前ip地址
const ip = ref('')
// 是否预览图片
const isView = ref(false)

// 当前留言板下标
const currentIndex = ref(-1)
const currentNote = reactive({})

// 查询条件
const query = reactive({
  page: 1,
  pageSize: 10,
  label: -1,
  type: 0,
})

// 是否全部获取
const isAll = computed(() => {
  if (tag.value == 0) {
    return walls.value.data?.length === walls.value.total
  } else if (tag.value == 1) {
    return phone.value.data?.length === phone.value.total
  }
  return false // 添加默认返回值
})

// 获取当前ip地址
async function getIp() {
  const res = await getIpInfo()
  ip.value = res.ip
}

// 获取留言
const getMessage = async () => {
  isLoading.value = true
  if(query.type == 0) {
    const data = await getWalls(query)
    walls.value = data
  } else {
    const data = await getWalls(query)
    phone.value = data
  }
  
  isLoading.value = false
}

// 在顶部添加
const getImageUrl = (name) => {
  return new URL(`../../assets/images/${name}.jpg`, import.meta.url).href
}

// 控制切换 0 留言墙 1 照片墙
const tag = computed(() => {
  return route.query.id
})


// 监听路由id 关闭弹出层
watch(
  () => route.query.id,
  (newVal, oldVal) => {
    if (newVal != oldVal) {
      isShow.value = false
    }
    if (newVal == 1) {
      query.type = 1
      getMessage()
    }
    if (newVal == 0) {
      query.type = 0
      getMessage()
    }
  }
)

// 打开弹出层
function openModal(val) {
  isShow.value = true
  if (currentIndex.value != -1) {
    title.value = ''
  } else {
    title.value = tag.value ? '照片墙' : '留言墙'
  }
  if(val == 1) {
    isView.value = true
  }
}

// 关闭弹出层状态
function closeModal(data) {
  isShow.value = false
  isView.value = false
  if (currentIndex.value != -1) {
    currentIndex.value = -1
  }
}

// 切换留言板选中
function toggleCardsIndex(val, data) {
  if (val != currentIndex.value) {
    currentIndex.value = val
    Object.assign(currentNote, data)
    // 打开弹窗
    openModal(1)
  } else {
    currentIndex.value = -1
    // 关闭弹窗
    closeModal()
  }
}

// 修改当前照片
function getCurrentIndex(val) {
  currentIndex.value = val
  Object.assign(currentNote, phone.data[currentIndex.value])
}

// 切换tag
function toggleLabel(index) {
  slabel.value = index
  query.label = slabel.value
  getMessage()
}

// 加载动画
function loadingAnimation() {
  nextTick(() => {
    lottie.loadAnimation({
      container: document.getElementById('lottie'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: loading,
    })
  })
}

// 监听页面的滚动
function scrollBottom() {
  // 距离顶部高度
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  // 屏幕高度
  let clientHeight = document.documentElement.clientHeight
  // 内容高度
  let scrollHeight = document.documentElement.scrollHeight

  if (scrollTop + clientHeight + 230 >= scrollHeight) {
    addBottom.value = scrollTop + clientHeight + 230 - scrollHeight
  } else {
    addBottom.value = 30
  }
  
  // 加载更多
  if(scrollTop + clientHeight + 10 >= scrollHeight && !isAll.value) {
    
    query.pageSize += 10
    getMessage()
  }

}

onMounted(() => {
  getMessage()
  window.addEventListener('scroll', scrollBottom)
  // 加载动画
  loadingAnimation()
  // 获取ip
  getIp()
})

onUnmounted(() => {
  window.removeEventListener('scroll')
})
</script>

<template>
  <div class="content">
    <p class="title">{{ wallType[tag].name }}</p>
    <p class="slogan">{{ wallType[tag].slogan }}</p>

    <div class="labels">
      <p
        class="label-item"
        @click="toggleLabel(-1)"
        :class="{ active: slabel == -1 }"
      >
        全部
      </p>
      <p
        class="label-item"
        @click="toggleLabel(index)"
        :class="{ active: slabel == index }"
        v-for="(item, index) in label[tag]"
        :key="item"
      >
        {{ item }}
      </p>
    </div>

    <div class="cards" v-show="tag == 0">
      <!-- 卡片 -->
      <NodeCard
        class="card-item"
        :ip="ip"
        v-for="(item, index) in walls.data"
        :key="item.name"
        :note="item"
        :class="{ active: currentIndex == index }"
        @click="toggleCardsIndex(index, item)"
      />
    </div>

    <!-- 照片墙 -->
    <div class="photo" v-show="tag == 1">
      <!-- 照片 -->
      <div class="image" v-for="(item, index) in phone.data" :key="item.name">
        <!-- <img :src="getImageUrl(item.imgurl)" alt="" /> -->
        <PhoteCard
          style="margin-bottom: 4px; break-inside: avoid"
          :photo="item"
          @click="toggleCardsIndex(index, item)"
        ></PhoteCard>
      </div>
    </div>
     <!-- loading -->
    <div class="loading" v-show="isLoading">
      <div id="lottie"></div>
      <p>加载中...</p>
    </div>

    <!-- 提示栏 -->
    <div class="Mes" v-show="tag == 1 && phone.total == 0">
      <p>还没有图片，快贴上第一张吧</p>
    </div>
    <div class="Mes" v-show="tag == 0 && walls.total == 0">
      <p>还没有留言，快贴上第一张吧</p>
    </div>
    <div class="Mes null" v-if="isAll && (phone.total >0 || walls.total>0)">
      <p>没有更多了...</p>
    </div>
   
    <!-- 预览 -->
    <View
      v-show="tag == 1 && isShow && isView"
      :photos="phone.data"
      :currentIndex="currentIndex < 0 ? 0 : currentIndex"
      @changeIndex="getCurrentIndex"
    />

    <!-- 添加按钮 -->
    <div
      v-show="!isShow"
      class="add"
      :style="{ bottom: addBottom + 'px' }"
      @click="openModal"
    >
      <span class="iconfont icon-tianjia"></span>
    </div>

    <!-- 弹出层 -->
    <Modal v-show="isShow" :title="title" @close="closeModal">
      <NewCard
        :tag="tag"
        @close="closeModal"
        @reload="getMessage"
        v-if="currentIndex == -1"
      ></NewCard>
      <CardDetail v-else :note="currentNote"></CardDetail>
    </Modal>
  </div>
</template>

<style scoped lang="less">
.content {
  min-height: 100vh;
  .title {
    font-size: 56px;
    color: @gray-1;
    font-weight: 600;
    margin-top: 50px;
    margin-bottom: 10px;
    text-align: center;
  }
  .slogan {
    color: @gray-2;
    text-align: center;
  }

  .labels {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    .label-item {
      // margin-right: 36px;
      padding: 0 14px;
      line-height: 28px;
      margin: @padding-4;
      color: @gray-2;
      cursor: pointer;
    }
    .label-item.active {
      color: @gray-1;
      font-weight: 600;
      border: 1px solid @gray-1;
      border-radius: 16px;
    }
  }

  .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 91%;
    margin: 0 auto;
    .card-item {
      margin: @padding-8;
      cursor: pointer;
      transition: 0.2s;
      &:hover {
        transform: translateY(-10px);
      }
      &.active {
        border: 1px solid @primary-color;
      }
    }
  }

  .photo {
    width: 88%;
    margin: 0 auto;
    columns: 6;
    column-gap: @padding-4;
  }
  .Mes {
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    font-size: @font-size-16;
    color: @gray-2;
    font-family: '宋体';
  }
  .Mes.null {
    min-height: 40px;
  }
  .loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    #lottie {
      width: 100px;
      height: 100px;
    }
    p {
      font-size: @font-size-16;
      color: @gray-2;
      font-family: '宋体';
    }
  }

  // 添加按钮
  .add {
    cursor: pointer;
    width: 56px;
    height: 56px;
    background: @gray-1;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
    border-radius: 28px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 20px;
    bottom: 30px;
    transition: all 0.2s;
  }
}
</style>
